<section class="page-wrapper">
    <div class="table-list">
        <div id="repeat-table-item" class="table-item" style="display:none;width: 20%;">
            <div class="item">
                <div class="t_name" style="font-size: 1.2rem"></div>
                <div class="t_state">空闲</div>
            </div>
        </div>
    </div>
    <script>
    (function () {
        'use strict';
        console.log('tables.html');

        $('#waiter-name').find('.text').text($.cookie('username'));

        var TableState = {
            IDLE: 0,
            USING: 1
        }

        var tableMap = {};

        function showStoreTables() {
            console.log("store id " + window.storeId);
            $.getJSON('/api/table/storeid/' + window.storeId, {}, function (data, status, xhr) {
                console.log(data)
                $.each(data, function (index, item) {
                    tableMap[item.id] = item.name;
                    addTable(item);
                });
            });
        }

        function addTable(item) {
            var $newItem = cloneItem();
            $newItem.attr('t-id', item.id);
            $newItem.attr('t-name', item.name);
            $newItem.find('.t_name').text(item.name);
            $newItem.attr('t-seating', item.seating);
            $newItem.attr('t-state', item.state);
            setTableState($newItem, item);
            $newItem.css({'visibility': 'hidden'});
            $repeatTableItem.before($newItem);
            var $innerItem = $newItem.find('.item');
            var width = $innerItem.width();
            $innerItem.height(width);
            $innerItem.css({'line-height': width + 'px'});
            $innerItem.css({'visibility': 'visible'});
            $newItem.on("click", tableClicked);
        }

        function tableClicked() {
            var state = $(this).attr('t-state');
            var tableId = $(this).attr('t-id');

            if (state == TableState.IDLE) { //空闲台桌，需要输入人数
                confirm("该餐桌暂未就餐");
            } else {
                location.href = "#action=orderDetail&tableId=" + tableId;
                console.log('tableId = ' + tableId);
            }
        }

        $(window).resize(function () {
            resizeTableItem();
        });

        function resizeTableItem() {
            console.log('resize');
            var $tableItem = $('.table-list .item');
            var width = $tableItem.width();
            $tableItem.height(width);
            $tableItem.css({'line-height': width + 'px'});
        }

        function setTableState($table, item) {
            var $state = $table.find('.t_state');
            if (item.state == TableState.USING) {
                $table.addClass('not-idle');
                $table.attr('t-state', item.state);
                $state.text('就餐中...');
            } else {
                $table.removeClass('not-idle');
                $state.text(item.seating + "人");
            }
        }

        var $repeatTableItem = undefined;

        function cloneItem() {
            if (!$repeatTableItem) {
                $repeatTableItem = $('#repeat-table-item');
            }
            var $item = $repeatTableItem.clone();
            $item.show();
            $item.attr('id', Date.now());
            return $item;
        }
        showStoreTables();
    }());
    </script>
</section>
